<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue'
import { MapComponentProps } from '../MapComponent.ts'
import {
    Viewer,
    Camera,
    Rectangle,
    UrlTemplateImageryProvider,
    JulianDate,
} from 'cesium'
import { MapContainerType } from '../Constant/MapContainerType.ts'
import CesiumViewerStore from './utils/CesiumViewerStore.ts'

const props = defineProps(MapComponentProps)
const emits = defineEmits(['init'])

const mapContainer = ref('')
// 三维场景对象
let viewer: Viewer | undefined

// 组件挂载并且可见，初始化地图
onMounted(() => {
    if (props.visible && props.show) {
        initMap()
    }
})

// 组件挂载并且可见，初始化地图
watch([() => props.visible, () => props.show], () => {
    // 地图显示并且没有初始化
    if (props.visible && props.show && !viewer) {
        initMap()
    } else if (!props.visible) {
        destroyCesiumViewer()
    }
})

const initMap = () => {
    nextTick(() => {
        initCesiumViewer()
    })
}

// 初始化三维场景
const initCesiumViewer = () => {
    // 设置初始默认视角
    Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(75, 0, 140.0, 60)
    /**
     * 注意为了避免Cesium避免endPoint请求报错，需要将所有访问Cesium官网的资源给禁用掉，不然就会有请求报错
     */
    viewer = new Viewer(mapContainer.value, {
        // 信息框
        infoBox: false,
        // 右上角位置搜索按钮
        geocoder: false,
        // 底图图层选择器
        baseLayerPicker: false,
        // 回到主视图按钮
        homeButton: false,
        // 视图选择按钮：2D、2.5D、3D
        sceneModePicker: false,
        // 帮助按钮
        navigationHelpButton: false,
        // 当前时间动画器件
        animation: false,
        // 全屏按钮
        fullscreenButton: false,
        // 底部时间轴控件
        timeline: false,
        // 加载谷歌地图影像
        imageryProvider: new UrlTemplateImageryProvider({
            // // 影像服务
            // url: "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
            // 影像 + 注记服务
            url: 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s,m&gl=CN&x={x}&y={y}&z={z}',

            // 4326或4490加载
            // url: './map/tdt/{z}/{x}/{y}.png',
            // maximumLevel: 4,
            // // 指定为WGS84坐标系瓦片
            // tilingScheme: new GeographicTilingScheme({
            //     ellipsoid: Ellipsoid.WGS84,
            // }),
        }),
        // // Cesium自带的瓦片地图
        // imageryProvider: new UrlTemplateImageryProvider({
        //     // Cesium自带的瓦片地图：注意瓦片的保存路径
        //     url: '../lib/Cesium/Assets/Textures/NaturalEarthII/{z}/{x}/{reverseY}.jpg',
        //     maximumLevel: 2,
        //     tilingScheme: new Cesium.GeographicTilingScheme({
        //         ellipsoid: Cesium.Ellipsoid.WGS84,
        //         // numberOfLevelZeroTilesX: 2,
        //         // numberOfLevelZeroTilesY: 1
        //     })
        // })
    })
    // 隐藏logo
    ;(<HTMLElement>viewer.cesiumWidget.creditContainer).style.display = 'none'
    // 关闭太阳光照
    viewer.scene.globe.enableLighting = false
    // 设置当前时间
    viewer.clock.currentTime = JulianDate.fromIso8601('2023-09-18T07:00:33.013999999995576218Z') // 北京时间下午15点

    // @ts-ignore
    window.viewer = viewer
    CesiumViewerStore.setMap(viewer)
    emits('init', MapContainerType.CesiumViewer)
}

// 销毁三维场景
const destroyCesiumViewer = () => {
    console.log('销毁三维场景')
    viewer && viewer.destroy()
    viewer = undefined
}
</script>

<template>
    <div v-if="visible" v-show="show" ref="mapContainer" id="mapContainer" class="cesium-viewer"></div>
</template>

<style scoped>
@import './css/CesiumViewer.scss';
</style>
